<%--
  Created by IntelliJ IDEA.
  User: Al Sah-him
  Date: 2018/7/5
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/global.jsp" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0, user-scalable=0">
<link href="${frontPath}/css/video-js.css" rel="stylesheet">
<script src="${frontPath}/js/video.min.js"></script>
<html>
<head>
    <jsp:include page="../common/include.jsp"/>
    <title>首页</title>
    <style>
        p {
            margin: 0;
            padding: 0;
        }

        .banner {
            background: url("${frontPath}/images/arvrbanner.png") no-repeat 50% 0;
            height: 600px;
            width: 100%;
            background-size: contain;
        }

        .commonBg {
            width: 100%;
            /*background: #091a2E;*/
        }

        .produce {
            height: 800px;
        }

        .top-title {
            width: 1190px;
            height: 174px;
            margin: 0 auto;
            padding-top: 63px;
        }

        .title {
            font-size: 33px;
            text-align: center;
            color: #fff;
        }

        .enTitle {
            font-size: 16px;
            color: #889198;
            padding: 9px 0 20px 0;
            text-align: center;
        }

        .line {
            width: 50px;
            height: 2px;
            background: -webkit-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: -o-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: -moz-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: linear-gradient(left, #11343E, #2AD1FD, #11343E);
            border-radius: 1px;
            margin: 0 auto;
        }

        .content {
            width: 1190px;
            height: 170px;
            margin: 0px auto;
            border-bottom: 1px solid rgba(18, 42, 68, 1);
        }

        .content .box {
            width: calc(100% / 6);
            height: 100%;
            float: left;
        }

        .content .box img {
            width: 66px;
            height: 66px;
            display: block;
            margin: 10px auto;
        }

        .content .box p {
            font-size: 23px;
            color: #fff;
            text-align: center;
            padding-top: 5px;
        }

        .produce {
            height: 870px;
        }

        .produce .content {
            height: 650px;
            margin: 46px auto;
        }

        .area .content {
            width: 1190px;
            height: 745px;
            margin: 50px auto 0 auto;
            position: relative;
            border: none;
        }

        .arvr .content {
            width: 100%;
            height: 690px;
            margin: 50px auto 0 auto;
            position: relative;
            border: none;
        }

        .arvr .content .videoBg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 588px;
            z-index: 99;
        }

        .arvr .content .play {
            position: absolute;
            top: 159px;
            left: calc((100% - 270px) / 2);
            width: 270px;
            height: 270px;
            z-index: 100;
        }

        .arvr .content .moreWarp {
            width: 1190px;
            height: 133px;
            margin: 22px auto 0 auto;
            color: #fff;
        }

        .arvr .content .moreWarp .more {
            float: right;
        }

        .arvr .content .moreWarp .more i {
            display: inline-block;
            width: 0;
            height: 0;
            margin: 0px 0px -2px 8px;
            border-top: 8px solid rgba(0, 0, 0, 0);
            border-right: 8px solid rgba(0, 0, 0, 0);
            border-bottom: 8px solid rgba(0, 0, 0, 0);
            border-left: 8px solid #fff;
        }

        .case .content {
            width: 1190px;
            height: 500px;
            margin: 50px auto 0 auto;
            position: relative;
            border: none;
        }

        .produce .fangan {
            display: block;
            margin: 0 auto;
        }

        .textWrap {
            width: calc((100% - 80px) / 3);
            height: 290px;
            float: left;
            margin-top: 100px;
            margin-right: 40px;
        }

        .produce .num1 {
            background: url("${frontPath}/images/01.png") no-repeat;
        }

        .produce .num2 {
            background: url("${frontPath}/images/02.png") no-repeat;
        }

        .produce .num3 {
            background: url("${frontPath}/images/03.png") no-repeat;
        }

        .produce .textWrap:last-child {
            margin-right: 0 !important;
        }

        .subTitle {
            margin-top: 31px;
            font-size: 24px;
            color: rgba(239, 239, 239, 1);
            line-height: 30px;
            display: block;
        }

        .textWrap .line {
            margin: 20px 0px;
        }

        .summ {
            display: block;
            width: 100%;
            font-size: 20px;
            color: rgba(132, 164, 211, 1);
        }

        .area {
            height: 718px;
        }

        .area .ar-left {
            width: 548px;
            height: 338px;
            border: 1px solid rgba(42, 209, 253, 1);
            position: absolute;
            z-index: 10;
            left: 0;
            top: 44px;
        }

        .area .ar-left img {
            width: 538px;
            height: 328px;
            margin: 5px 4px;
        }

        .area .ar-right {
            width: 822px;
            height: 426px;
            border: 1px solid rgba(42, 209, 253, 1);
            position: absolute;
            right: 0;
        }

        .area .subTitle {
            margin-left: 280px;
        }

        .area .content .line {
            margin: 20px 280px;
        }

        .area .summ {
            margin-left: 280px;
            width: 420px;
        }

        .area .fangWrap {
            margin-left: 280px;
            margin-top: 32px;
            width: 420px;
            height: 190px;
        }

        .area .fangWrap img {
            width: 120px;
            height: 85px;
            float: left;
            margin-left: 26px;
            margin-top: 20px;
        }

        .area .fangWrap .odd {
            margin-left: 0px !important;
        }

        .area .fangWrap .f-top {
            margin-top: 0 !important;
        }

        .case .ar-left {
            width: 822px;
            height: 426px;
            border: 1px solid rgba(42, 209, 253, 1);
            position: absolute;
            left: 0;
        }

        .case .subTitle {
            margin-left: 75px;
            margin-top: 100px;
        }

        .case .content .line {
            margin: 20px 70px;
        }

        .case .summ {
            margin-left: 70px;
            width: 510px;
        }

        .case .ar-right {
            width: 548px;
            height: 338px;
            border: 1px solid rgba(42, 209, 253, 1);
            position: absolute;
            z-index: 10;
            right: 0;
            top: 44px;
        }

        .case .ar-right img {
            width: 538px;
            height: 328px;
            margin: 5px 4px;
        }

        /*视频样式开始*/
        .vjs-poster {
            background-size: cover;
        }

        .vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
            margin-left: -135px;
            margin-top: -135px;
        }

        .vjs-default-skin .vjs-big-play-button {
            background: url("${frontPath}/images/play.png") no-repeat !important;
            width: 270px;
            height: 270px;
            border-radius: 50%;
            border: none;
            box-shadow: 0 0 1em rgba(255, 255, 255, 0);
        }

        .video-js .vjs-big-play-button .vjs-icon-placeholder:before, .vjs-icon-play:before{
            content: "" !important;
        }

        .vjs-default-skin .vjs-big-play-button:before {
            content: "" !important;
        }

        .vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus {
            box-shadow: 0 0 3em #ffffff40;
        }
        .example_video_1-dimensions{
            width: 100%;
        }
        /*视频样式结束*/
    </style>
</head>
<body>
<jsp:include page="layout/head.jsp"/>
<div class="banner"></div>
<div class="commonBg produce">
    <div class="top-title">
        <p class="title">产品服务</p>
        <p class="enTitle">PRODUCT SERVICE</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <img src="${frontPath}/images/arvr1.png" class="fangan">
        <div class="textWrap num1">
            <span class="subTitle">AR全景视频制作</span>
            <p class="line"></p>
            <span class="summ">
                亿万级精度全景图拍摄 ， 4k-12k广播及全景视频拍摄，720度3D立体全景航拍，水下全景拍摄。
            </span>
        </div>

        <div class="textWrap num2">
            <span class="subTitle">AR/VR场景化营销</span>
            <p class="line"></p>
            <span class="summ">
                通过各种虚拟数字化的完美逼真的营销场景，为旅游、教育电商等行业，提供沉浸式营销推广模式。
            </span>
        </div>

        <div class="textWrap num3">
            <span class="subTitle">AR/VR场景化营销</span>
            <p class="line"></p>
            <span class="summ">
                为线下体验，发布会在线培训等提供量身定制的各种虚拟应用方案，让用户足不出户解决方案。
            </span>
        </div>
    </div>
    <%--<span class="mes" v-if="seen">{{message}}</span>--%>
</div>
<div class="commonBg area">
    <div class="top-title">
        <p class="title">AR/VR应用领域</p>
        <p class="enTitle">VR/AR APPLICATIONS</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <div class="ar-left">
            <img src="${frontPath}/images/arvr2.png" alt="">
        </div>
        <div class="ar-right">
            <span class="subTitle">AR/VR房产</span>
            <p class="line"></p>
            <span class="summ">
                实现户外户内景观空间，虚拟的720沉浸漫游足不出户，也能动观天下。
            </span>
            <div class="fangWrap">
                <img src="${frontPath}/images/arvr2.png" alt="" class="f-top odd">
                <img src="${frontPath}/images/arvr2.png" alt="" class="f-top">
                <img src="${frontPath}/images/arvr2.png" alt="" class="f-top">
                <img src="${frontPath}/images/arvr2.png" alt="" class="odd">
                <img src="${frontPath}/images/arvr2.png" alt="">
                <img src="${frontPath}/images/arvr2.png" alt="">
            </div>
        </div>
    </div>
</div>
<div class="commonBg arvr">
    <div class="top-title">
        <p class="title">VR经典案例</p>
        <p class="enTitle">VR CLASSIC CASE</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
               controls width="100%" height="588"
               poster="${frontPath}/images/banner1.png"
               data-setup='{"example_option":true}'>
            <source src="${frontPath}/video/video.mp4" type='video/mp4'/>
        </video>
    </div>
</div>
<div class="commonBg case">
    <div class="top-title">
        <p class="title">AR经典案例</p>
        <p class="enTitle">AR CLASSIC CASE</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <div class="ar-left">
            <span class="subTitle">AR/VR房产</span>
            <p class="line"></p>
            <span class="summ">
                与传统纸质宣传手册相结合通过移动终端设备扫描查看房产规划、小区规划等。传统的户型手册上，户型图是平面的，难以感知未来的室内空间。而AR技术能够将户型从一张纸跃然变成3D形式，活灵活现的展现在手机中。
            </span>
        </div>
        <div class="ar-right">
            <img src="${frontPath}/images/arvr2.png" alt="">
        </div>
    </div>
</div>

<jsp:include page="layout/foot.jsp"/>
</body>
<script src="http://vjs.zencdn.net/5.19/lang/zh-CN.js"></script>
<script>
    $(function () {
        //导航栏
        initGuide(3);

        $(window).scroll(function () {
            var scrollTop = $(document).scrollTop();
            var height = $(".banner").height() - 67;
            if (scrollTop > height) {
                $(".headWrap").addClass("bgBlue");
            } else {
                $(".headWrap").removeClass("bgBlue");
            }
        });
    });
</script>
</html>
